<template>
    <div>
        <TopNav title="编辑资料" />
        <div class="avatarWrapper">
            <!-- 这里添加一个优化, 没有头像的情况, 有两种, 1.真的没有 2.只是数据还没到
            只有前面这种真的没有的情况才需要显示默认头像, 所以加上 nickname 做辅助判断 -->
            <van-uploader :after-read="upload" v-if="userInfo.nickname" >
                <img
                    v-if="userInfo.head_img"
                    :src="`${$axios.defaults.baseURL}${userInfo.head_img}`"
                    alt
                    class="avatar"
                />
                <img v-else src="@/assets/avatar.jpg" alt class="avatar" />
            </van-uploader>
        </div>
        <PersonalCell label="昵称" :desc="userInfo.nickname" @click="isShowNickname = true" />
        <PersonalCell label="密码" desc="******" @click="isShowPassword = true" />
        <PersonalCell label="性别" :desc="userInfo.gender == 0 ? '女' : '男'" @click="isShowGender = true"/>

        <!-- 这里是页面最下方, 下面都给输入框做占位 -->
        <!-- 修改昵称 -->
        <van-dialog v-model="isShowNickname" title="修改昵称" show-cancel-button @confirm="setNickname" @cancel="newNickname = ''">
            <van-field v-model="newNickname" placeholder="请输入新昵称" />
        </van-dialog>

        <!-- 修改密码 -->
        <van-dialog v-model="isShowPassword" title="修改密码" show-cancel-button @confirm="setPassword" @cancel="newPassword = ''">
            <van-field v-model="newPassword" placeholder="请输入新密码" />
        </van-dialog>

        <!-- 编辑性别 -->
        <van-action-sheet v-model="isShowGender" :actions="genderList" cancel-text="不想改了" @select="setGender"></van-action-sheet>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav";
    import PersonalCell from "@/components/PersonalCell";
    export default {
        data() {
            return {
                userInfo: {},
                isShowNickname: false,
                isShowPassword: false,
                isShowGender: false,
                genderList: [
                    {
                        // name 是显示给用户看的文字
                        name: '小鲜肉',
                        genderCode: 1
                    },
                    {
                        name: '小仙女',
                        genderCode: 0
                    }
                ],
                newNickname: "",
                newPassword: "",
            };
        },
        components: {
            TopNav,
            PersonalCell,
        },
        created() {
            this.loadPage();
        },
        methods: {
            upload(fileObj) {
                console.log(fileObj.file);
                // 1. 转换二进制
                var data = new FormData();
                data.append('file', fileObj.file)

                // 2. 上传图片
                this.$axios({
                    method: 'post',
                    url: '/upload',
                    data,
                }).then(res=>{
                    console.log(res.data);
                    if (res.data.message == "文件上传成功") {
                        // 在这里就可以拿到服务器存放图片的地址了
                        // 3. 真正修改头像
                        console.log(res.data.data.url);
                        this.editProfile({
                            head_img: res.data.data.url
                        })
                    }
                })
            },
            setNickname() {
                if (!this.newNickname) {
                    this.$toast.fail('请输入昵称')
                    return
                }
                this.editProfile({
                    nickname: this.newNickname,
                });
                this.newNickname = ""
            },
            setPassword() {
                if (!this.newPassword) {
                    this.$toast.fail('请输入密码')
                    return
                }
                this.editProfile({
                    password: this.newPassword,
                });
                this.newPassword = ""
            },
            setGender(item) {
                console.log(item);
                this.editProfile({
                    gender: item.genderCode
                })
                this.isShowGender = false
            },
            // 封装修改用户数据的过程
            editProfile(dataObj) {
                this.$axios({
                    method: "post",
                    url: "/user_update/" + localStorage.getItem("userId"),
                    data: dataObj,
                }).then((res) => {
                    console.log(res.data);
                    this.loadPage();
                });
            },
            loadPage() {
                this.$axios({
                    url: "/user/" + localStorage.getItem("userId"),
                }).then((res) => {
                    this.userInfo = res.data.data;
                    console.log(this.userInfo);
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .avatarWrapper {
        height: 160/360 * 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        .avatar {
            width: 70/360 * 100vw;
            height: 70/360 * 100vw;
            object-fit: cover;
            border-radius: 50%;
        }
    }
</style>